import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Input } from '../../components/ui/input';

const meta: Meta<typeof Input> = {
  title: 'UI/Input',
  component: Input,
  tags: ['autodocs'],
  argTypes: {
    disabled: {
      control: 'boolean',
      description: '是否禁用',
    },
    placeholder: {
      control: 'text',
      description: '占位文本',
    },
    type: {
      control: 'select',
      options: ['text', 'password', 'email', 'number', 'tel', 'url', 'search'],
      description: '输入框类型',
    },
  },
};

export default meta;
type Story = StoryObj<typeof Input>;

export const Default: Story = {
  args: {
    placeholder: '请输入内容',
  },
};

export const Email: Story = {
  args: {
    type: 'email',
    placeholder: '请输入邮箱地址',
  },
};

export const Password: Story = {
  args: {
    type: 'password',
    placeholder: '请输入密码',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    value: '禁用状态',
  },
};

export const WithLabel: Story = {
  render: () => (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <label htmlFor="email" className="text-sm font-medium">邮箱</label>
      <Input type="email" id="email" placeholder="请输入邮箱地址" />
    </div>
  ),
};
